<template>
  <div class="flex gap-4 items-center">
    <div class="flex gap-2 justify-between">
      <div
        v-for="(item, key) in data"
        :key="key"
        class="square flex justify-center items-center"
        :class="{ active: item.rotate === active }"
        :style="{ transform: `rotate(${item.rotate}deg)` }"
        @click="setActive(item, key)"
      >
        A
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(["change"]);
const active = defineModel<number>();
interface FlipItem {
  flipX: boolean;
  swap: boolean;
  rotate: number;
}

const data: FlipItem[] = [
  {
    flipX: false,
    swap: false,
    rotate: 0
  },
  {
    flipX: true,
    swap: true,
    rotate: 90
  },
  {
    flipX: true,
    swap: false,
    rotate: 180
  },
  {
    flipX: false,
    swap: true,
    rotate: -90
  }
];
const setActive = (item: FlipItem, i: number) => {
  active.value = i;
  emit("change", item);
};
</script>

<style lang="scss" scoped>
.square {
  height: 32px;
  width: 32px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.active {
  border: 1px solid var(--primary);
}
</style>
